<template>
  <div class="flex flex-col justify-center items-center w-full h-[100vh]">
    <!-- 登录 -->
    <div v-if="isRegister" class="flex flex-col w-[300px]  p-2"
    :class="myCard">
      <h2 class="text-blue-700">登录</h2>
      <ConfigForm 
      :configs="configs"
      v-model:value="params"
      v-model:form="formRef"
      labelAlign="right"
      :labelCol="{ flex: '70px' }"
      :wrapperCol="{ span: 24 }"
      />
      <Button style=" margin-left: auto " type="primary" size="middle" @click="onSubmit">登录</Button>
    </div>
    <!-- 注册 -->
    <div v-else class="flex flex-col w-[300px] p-2"
    :class="myCard" >
      <h2 class="text-blue-700">注册</h2>
      <ConfigForm 
      :configs="configs"
      v-model:value="params"
      v-model:form="formRef"
      labelAlign="right"
      :labelCol="{ flex: '70px' }"
      :wrapperCol="{ span: 24 }"
      />
      <!-- <Form :model="params" :label-col="{flex:'64px'}" :wrapper-col="{span:24}">
        <FormItem label="用户名">
          <Input v-model:value="params.username" />
        </FormItem>
        <FormItem label="密码">
          <Input v-model:value="params.password" />
        </FormItem>
        <FormItem label="验证码">
          <Input v-model:value="params.securatyCode" />
        </FormItem>
      </Form> -->
      <Button style=" margin-left: auto " type="primary" size="middle" @click="onSubmit">注册</Button>
    </div>
    <div class="flex w-[300px] mt-2">
      <Button v-if="isRegister" type="link" @click="handleSwitch">去注册</Button>
      <Button v-else type="link" @click="handleSwitch">去登录</Button> 
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Button, Input} from 'ant-design-vue';
import ConfigForm from '@/components/blog-form/ConfigForm.vue';
import { useRouter } from 'vue-router';
import { myCard } from '@/const/style';
import { loginAPI, registerAPI } from '../api';
const router = useRouter()

// type: any;
//   layout?: 'horizontal' | 'vertical' | 'inline';
//   key?: string;
//   name?: string | (string | number)[];
//   label?: any;
//   rules?: any[];
//   colon?: boolean;
const configs = [
  {
    type:Input,
    key:'username',
    name:'username',
    label:'用户名',
    attrs:{
      placeholder:'请输入用户名',
    },
    rules:[
      {required:true,message:'不能为空'}
    ]
  },
  {
    type:Input,
    key:'password',
    name:'password',
    label:'密码',
    attrs:{
      placeholder:'请输入密码',
    },
    rules:[
      {required:true,message:'不能为空'},
    ]
  },
  {
    type:Input,
    key:'securatyCode',
    name:'securatyCode',
    label:'验证码',
    when:()=>!isRegister.value,
    attrs:{
      placeholder:'请输入正确的验证码',
    },
    rules:[
      // {required:true,message:'不能为空'},
    ]
  }
]
const loading = ref(false);
const params = ref<{
  username:string,
  password:string,
  securatyCode?:string
}>({
  username:'',
  password:'',
  securatyCode:''
})

const formRef = ref()



const isRegister = ref(false)
const clearParams = ()=>{
  params.value.password = '',
  params.value.username = '',
  params.value.securatyCode =''
}
const handleSwitch = ()=>{
  isRegister.value = !isRegister.value
  clearParams()
}

const onSubmit = async()=>{
  console.log("表单:",params.value)
  try {
    loading.value = true
    await formRef.value.validate()
    const fetchParams = {
      user_name:params.value.username,
      password:params.value.password,
      securatyCode:params.value.securatyCode
    }
    if(isRegister.value){
      const {data} =  await loginAPI(fetchParams)
      localStorage.setItem('token',data.data.token)
      // 跳转到首页
      clearParams()
      router.push('/home')
    }
    else{
      await registerAPI(fetchParams)
      isRegister.value = true
      clearParams()
    }
  } catch (error) {
    console.error(error)
  }
  finally{
    loading.value = false
  }
}
</script>
<style lang="less">
  
</style>